<template>
  <header
    id="nav-headroom-scroll"
    class="sticky top-0 z-40 lg:z-50 w-full max-w-8xl mx-auto flex-none flex pl-4 pr-4 h-10 min-h-full bg-gitlab"
  >
    <div class="flex flex-wrap items-center justify-between w-full sm:flex-nowrap">
      <div class="w-full flex justify-between relative h-10 min-h-full">
        <!-- header of left -->
        <div class="flex items-stretch flex-auto overflow-visible">
          <h1 hidden>隐藏的h1标签</h1>
          <div class="flex relative align-top whitespace-nowrap">
            <a
              title="Dashboard"
              id="logo"
              href="/gitlab.html"
              class="flex items-center py-0.5 px-2 -ml-2 mr-0.5 my-1.25 rounded"
            >
              <svg width="24" height="24" class="tanuki-logo" viewBox="0 0 36 36">
                <path
                  class="tanuki-shape tanuki-left-ear"
                  fill="#e24329"
                  d="M2 14l9.38 9v-9l-4-12.28c-.205-.632-1.176-.632-1.38 0z"
                ></path>
                <path
                  class="tanuki-shape tanuki-right-ear"
                  fill="#e24329"
                  d="M34 14l-9.38 9v-9l4-12.28c.205-.632 1.176-.632 1.38 0z"
                ></path>
                <path
                  class="tanuki-shape tanuki-nose"
                  fill="#e24329"
                  d="M18,34.38 3,14 33,14 Z"
                ></path>
                <path
                  class="tanuki-shape tanuki-left-eye"
                  fill="#fc6d26"
                  d="M18,34.38 11.38,14 2,14 6,25Z"
                ></path>
                <path
                  class="tanuki-shape tanuki-right-eye"
                  fill="#fc6d26"
                  d="M18,34.38 24.62,14 34,14 30,25Z"
                ></path>
                <path
                  class="tanuki-shape tanuki-left-cheek"
                  fill="#fca326"
                  d="M2 14L.1 20.16c-.18.565 0 1.2.5 1.56l17.42 12.66z"
                ></path>
                <path
                  class="tanuki-shape tanuki-right-cheek"
                  fill="#fca326"
                  d="M34 14l1.9 6.16c.18.565 0 1.2-.5 1.56L18 34.38z"
                ></path>
              </svg>
              <span class="ml-2 py-1.25 text-white leading-initial hidden 992:block">
                <svg
                  width="55"
                  height="14"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 617 169"
                  class="fill-current"
                >
                  <path
                    d="M315.26 2.97h-21.8l.1 162.5h88.3v-20.1h-66.5l-.1-142.4M465.89 136.95c-5.5 5.7-14.6 11.4-27 11.4-16.6 0-23.3-8.2-23.3-18.9 0-16.1 11.2-23.8 35-23.8 4.5 0 11.7.5 15.4 1.2v30.1h-.1m-22.6-98.5c-17.6 0-33.8 6.2-46.4 16.7l7.7 13.4c8.9-5.2 19.8-10.4 35.5-10.4 17.9 0 25.8 9.2 25.8 24.6v7.9c-3.5-.7-10.7-1.2-15.1-1.2-38.2 0-57.6 13.4-57.6 41.4 0 25.1 15.4 37.7 38.7 37.7 15.7 0 30.8-7.2 36-18.9l4 15.9h15.4v-83.2c-.1-26.3-11.5-43.9-44-43.9M557.63 149.1c-8.2 0-15.4-1-20.8-3.5V70.5c7.4-6.2 16.6-10.7 28.3-10.7 21.1 0 29.2 14.9 29.2 39 0 34.2-13.1 50.3-36.7 50.3m9.2-110.6c-19.5 0-30 13.3-30 13.3v-21l-.1-27.8h-21.3l.1 158.5c10.7 4.5 25.3 6.9 41.2 6.9 40.7 0 60.3-26 60.3-70.9-.1-35.5-18.2-59-50.2-59M77.9 20.6c19.3 0 31.8 6.4 39.9 12.9l9.4-16.3C114.5 6 97.3 0 78.9 0 32.5 0 0 28.3 0 85.4c0 59.8 35.1 83.1 75.2 83.1 20.1 0 37.2-4.7 48.4-9.4l-.5-63.9V75.1H63.6v20.1h38l.5 48.5c-5 2.5-13.6 4.5-25.3 4.5-32.2 0-53.8-20.3-53.8-63-.1-43.5 22.2-64.6 54.9-64.6M231.43 2.95h-21.3l.1 27.3v94.3c0 26.3 11.4 43.9 43.9 43.9 4.5 0 8.9-.4 13.1-1.2v-19.1c-3.1.5-6.4.7-9.9.7-17.9 0-25.8-9.2-25.8-24.6v-65h35.7v-17.8h-35.7l-.1-38.5M155.96 165.47h21.3v-124h-21.3v124M155.96 24.37h21.3V3.07h-21.3v21.3"
                  ></path>
                </svg>
              </span>
            </a>
          </div>
          <ul class="text-gitlab flex ml-1.5">
            <li class="relative tv-active">
              <a class="nav-item" title="Instance Statistics" href="/statistics">
                Projects
                <tv-svg class-name="svg-caret-down" path="angle-down"></tv-svg>
              </a>
            </li>
            <li>
              <a class="nav-item" title="Instance Statistics" href="/statistics"
                >Activity</a
              >
            </li>
            <li class="d-none d-lg-block d-xl-block">
              <a class="nav-item" title="Instance Statistics" href="/statistics">
                <tv-svg class-name="w-4.5 h-4.5 fill-current" path="chart"></tv-svg>
              </a>
            </li>
          </ul>
        </div>
        <!-- header of right -->
        <div class="header-right">
          <ul class="flex">
            <!-- search: 宽度变化系列 -->
            <!-- <li class="search m-auto" hidden :class="{ 'search-active': searchActive }">
              <div class="mx-2">
                <form class="search-form">
                  <input name="utf8" type="hidden" value="✓" />
                  <div class="h-full">
                    <div class="flex items-center">
                      <input
                        @focus="handleSearchFocus"
                        @blur="handleSearchFocus"
                        class="search-input"
                        type="search"
                        name="search"
                        placeholder="Search or jump to…"
                        spellcheck="false"
                        tabindex="1"
                        autocomplete="off"
                      />
                      <tv-svg
                        v-show="!searchActive"
                        class="svg-right"
                        path="search"
                      ></tv-svg>
                      <tv-svg
                        v-show="searchActive"
                        class="svg-right"
                        path="close"
                      ></tv-svg>
                    </div>
                  </div>
                </form>
              </div>
            </li>
            <li class="hidden">
              <a title="search" class="nav-item" href="/search">
                <tv-svg class="svg-right" path="search"> </tv-svg>
                <span class="badge badge-pill hidden merge-requests-count"> 0 </span>
              </a>
            </li> -->
            <!-- search: dialog系列 -->
            <li>
              <a @click="handleSearchVisible(true)" title="search" class="nav-item" href="javascript:void(0);">
                <tv-svg class="svg-right" path="search"> </tv-svg>
                <span class="hidden md:inline"
                  >Quick search<span class="hidden xl:inline"> for anything</span></span
                >
                <span class="badge badge-pill hidden merge-requests-count"> 0 </span>
              </a>
            </li>

            <li>
              <a class="nav-item avatar">
                <img
                  class="float-left w-5 h-5 rounded-full transition-colors duration-100 ease-linear border border-gray-300 border-solid"
                  src="https://www.w3school.com.cn/i/eg_tulip.jpg"
                />
                <tv-svg class="svg-caret-down" path="angle-down"> </tv-svg>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </header>
  <!-- 传送: 插入到body中; 但是TvAlgolia仍是TvHeader的子组件! -->
  <teleport to="body">
    <tv-algolia v-if="searchActive" @close="handleSearchVisible" />
  </teleport>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import TvAlgolia from "../components/TvAlgolia.vue";
export default defineComponent({
  components: {
    [TvAlgolia.name]: TvAlgolia,
  },
  name: "tv-header",
  setup() {
    const searchActive = ref(false);
    const handleSearchVisible = (value: boolean) => {
      searchActive.value = value;
    };
    return { searchActive, handleSearchVisible };
  },
});
</script>

<!-- <style src="../assets/headroom.css"></style> -->
<style scoped>
@import "../assets/headroom.css";

/* 右侧 */
.header-right {
  @apply flex text-gitlab items-center;
}

.nav-item {
  @apply flex items-center justify-center;
  @apply px-2 py-1.5 my-1 mx-0.5 h-8;
  /* text-current: `color: currentColor;` <=> `color: inherit;` */
  @apply text-xs leading-initial font-semibold rounded;
  @apply transition-colors duration-100 ease-linear hover:text-white hover:bg-gitlab-hover;
  @apply cursor-pointer;
}
.nav-item.avatar {
  border-left: 1px solid #6868b9;
}
.nav-item .svg-caret-down {
  @apply w-2.75 h-2.75 ml-1 fill-current;
}
.svg-right {
  @apply w-4 h-4 mr-1 fill-current;
}

.tv-active .nav-item {
  @apply bg-white;
  color: #292961;
}
.header-right .nav-item {
  @apply mx-0;
  /* will-change: color; 告知浏览器该元素会有哪些变化*/
}

.search-form {
  @apply p-1 w-52 leading-6 h-8 rounded;
  background-color: rgba(209, 209, 240, 0.3);
  transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s,
    width ease-in-out 0.15s;
}
.search-input {
  @apply w-44 p-0 pl-1 text-sm text-gray-700 placeholder-gray-300;
  @apply bg-transparent border-0 focus:ring-0; /* outline-none border-0 */
}
.search-input::-webkit-search-cancel-button {
  display: none;
  /* -webkit-appearance: none; */
  /* position: relative;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #ebebeb url("img/clear.png") no-repeat center;
  background-size: 18px 18px; */
}
.search-active .search-form {
  @apply bg-white w-80;
}
.search-active .search-form .search-input {
  @apply w-72;
}
</style>
